<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="小区" prop="communityId">
            <communitySelect v-model="queryParams.communityId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区域" prop="region">
            <el-input
              v-model="queryParams.region"
              placeholder="请输入(模糊搜索)"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地址" prop="smallAddress">
            <el-input
              v-model="queryParams.smallAddress"
              placeholder="请输入(模糊搜索)"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼栋" prop="floorName">
            <el-input
              v-model="queryParams.floorName"
              placeholder="请输入楼栋"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房号" prop="roomNum">
            <el-input
              v-model="queryParams.roomNum"
              placeholder="请输入房号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单元" prop="unitNum">
            <el-input
              v-model="queryParams.unitNum"
              placeholder="请输入单元"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="绑定收费" prop="propertyStatus">
            <el-select
              v-model="queryParams.propertyStatus"
              placeholder="请选择"
            >
              <el-option label="未绑定" :value="0" />
              <el-option label="已绑定" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="导入姓名" prop="realName">
            <el-input
              v-model="queryParams.realName"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="0">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button plain icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="generatePropertyFee"
          :disabled="!selectedRooms.length"
          >生成物业费</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getRoomList">
        <template #left>
          <el-button icon="Download" @click="showExportDialog"
            >导出已缴纳</el-button
          >
        </template>
      </right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="roomList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column
        prop="communityId"
        label="小区"
        align="center"
        width="150"
      >
        <template #default="scope">
          {{ matchCommunity(scope.row.communityId).name }}
        </template>
      </el-table-column>
      <el-table-column prop="region" label="区域" align="center" width="100" />
      <el-table-column prop="smallAddress" label="地址" align="center" />
      <el-table-column prop="floorName" label="楼栋" align="center" />
      <el-table-column prop="unitNum" label="单元" align="center" />
      <el-table-column prop="roomNum" label="房号" align="center" />
      <el-table-column prop="housingProperty" label="房屋属性" align="center" />
      <el-table-column prop="rent" label="年租金" align="center" />
      <el-table-column prop="realName" label="导入姓名" align="center" />
      <el-table-column prop="propertyStatus" label="收费绑定" align="center">
        <template #default="scope">
          {{ propertyStatusMap[scope.row.propertyStatus] }}
        </template>
      </el-table-column>

      <el-table-column
        prop="buildingArea"
        label="建筑面积(m²)"
        align="center"
      />
      <el-table-column prop="roomArea" label="套内面积(m²)" align="center" />
      <el-table-column prop="sharedArea" label="公摊面积(m²)" align="center" />
      <el-table-column prop="section" label="室" align="center" />
      <el-table-column prop="hall" label="厅" align="center" />
      <el-table-column prop="toilet" label="卫" align="center" />
      <el-table-column prop="orientation" label="朝向" align="center" />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      />
      <el-table-column
        label="操作"
        width="180"
        fixed="right"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="{ row }">
          <div>
            <el-button link type="primary" @click="orderDetailHandle(row)"
              >缴费明细</el-button
            >
            <el-button link type="primary" @click="editHandle(row)"
              >查看</el-button
            >
          </div>
          <div>
            <el-button
              v-if="row.propertyStatus === 0"
              type="primary"
              link
              @click="bindHandle(row)"
              >绑定收费</el-button
            >
            <el-button v-else type="primary" link @click="unBindFeeHandle(row)"
              >解绑收费</el-button
            >
            <el-button link type="primary" @click="deleteHandle(row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getRoomList"
    />
    <addEdit
      v-model="showAddEdit"
      v-if="showAddEdit"
      :row="curRow"
      @submit="getRoomList"
    />
    <bindFee
      v-model="showBindFee"
      v-if="showBindFee"
      :row="curRow"
      :ids="bindIds"
      @submit="getRoomList"
    />
    <orderDetail
      v-model="showOrderDetailDialog"
      v-if="showOrderDetailDialog"
      :row="curRow"
    />
    <createFee
      v-model="showCreateFee"
      v-if="showCreateFee"
      :ids="selectedRooms"
      @submit="getRoomList"
    />

    <el-dialog title="导出物业费" v-model="dialogVisible">
      <el-form ref="exportFormRef" :model="exportForm" label-width="80px">
        <el-form-item label="导出日期" prop="time">
          <el-date-picker
            v-model="exportForm.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            :default-time="[
              new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 2, 1, 23, 59, 59),
            ]"
          />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="showExportDialog(false)">取 消</el-button>
          <el-button type="primary" @click="exportPropertyPayedFee"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="RoomList">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import communitySelect from "@/components/communitySelect";
import addEdit from "./addEdit.vue";
import bindFee from "./bindFee.vue";
import orderDetail from "./orderDetail.vue";
import createFee from "./createFee.vue";
import { matchCommunity } from "@/common";
import {
  getBuildingRoomPage,
  removeBuildingRoom,
  batchClearFeeConfigToBuildingRoom,
  exportPropertyBill,
} from "@/api/realEstateManage";

const queryRef = ref();
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  communityId: "",
  floorId: "",
  unitNum: "",
});
const dialogVisible = ref(false);
const exportForm = ref({
  time: "",
});
const exportFormRef = ref();

const showExportDialog = (isShow = true) => {
  dialogVisible.value = isShow;
};

const roomList = ref([]);
const total = ref(0);
const loading = ref(true);

const showAddEdit = ref(false);
const showBindFee = ref(false);
const bindIds = ref([]);
const curRow = ref({});
const title = ref("");
// const addHandle = () => {
//   curRow.value = {};
//   title.value = "添加房屋";
//   showAddEdit.value = true;
// };
const editHandle = (row) => {
  curRow.value = row;
  title.value = "编辑房屋";
  showAddEdit.value = true;
};

const handleQuery = () => {
  queryParams.value.pageNo = 1;
  getRoomList();
};
const deleteHandle = (row) => {
  ElMessageBox.confirm("是否确认删除该房屋？").then(() => {
    removeBuildingRoom(row.id).then(({ data }) => {
      if (data) {
        ElMessage.success("删除成功");
        getRoomList();
      } else {
        ElMessage.error("删除失败");
      }
    });
  });
};

const resetQuery = () => {
  queryRef.value.resetFields();
  getRoomList();
};

const getRoomList = () => {
  loading.value = true;
  getBuildingRoomPage(queryParams.value)
    .then((res) => {
      total.value = res.data.total;
      roomList.value = res.data.records;
    })
    .finally(() => {
      loading.value = false;
    });
};

const bindHandle = (row) => {
  bindIds.value = [row.id];
  showBindFee.value = true;
  curRow.value = row;
};
const unBindFeeHandle = (row) => {
  ElMessageBox.confirm("是否确认解除绑定？").then(() => {
    batchClearFeeConfigToBuildingRoom({
      type: 0,
      communityId: row.communityId,
      roomIds: [row.id],
    }).then(({ data }) => {
      if (data) {
        ElMessage.success("解除绑定成功");
        getRoomList();
      } else {
        ElMessage.error("解除绑定失败");
      }
    });
  });
};

const propertyStatusMap = {
  0: "未绑定",
  1: "已绑定",
};
getRoomList();

const selectedRooms = ref([]);

const handleSelectionChange = (selection) => {
  selectedRooms.value = selection;
};

const showCreateFee = ref(false);
const generatePropertyFee = () => {
  if (selectedRooms.value.length === 0) {
    ElMessage.warning("请至少选择一个房间");
    return;
  }
  showCreateFee.value = true;
};

const showOrderDetailDialog = ref(false);
const orderDetailHandle = (row) => {
  curRow.value = row;
  showOrderDetailDialog.value = true;
};

const exportPropertyPayedFee = () => {
  exportFormRef.value.validate((valid) => {
    if (valid) {
      exportPropertyBill({
        startTime: exportForm.value.time[0],
        endTime: exportForm.value.time[1],
      }).then((res) => {
        showExportDialog(false);
      });
    }
  });
};
</script>
